<template>
  <view>
    <view class="head" @click="onSwitch">
      <text :id="1" :class="{ active: id == 1 }">可使用</text>
      <text :id="2" :class="{ active: id == 2 }">已过期(已使用)</text>
    </view>
    <view class="card_content" v-if="cardList.length != 0">
      <view class="card" v-for="(item, index) in cardList" :key="index">
        <image src="../../static/images/ci_card.jpg" mode="aspectFit"></image>
        <view class="right" @click="navTo(item.TotalId)">
          <text class="title">{{ item.FName }}</text>
          <text>消费商品: {{ item.FName }} {{ item.FTime }}次卡</text>
          <text>使用期限: {{ item.FCardTypeDesc }}</text>
          <view class="card_number">
            <text>次数:{{ item.FTime }}/{{ item.LiveTime }}</text>
            <!-- <button>使用</button> -->
          </view>
        </view>
      </view>
    </view>
    <view class="card_content" v-else> 暂无次卡 </view>
  </view>
</template>

<script>
import { reqPost } from "../../common/http.request";
import { useUser } from "../../store/useUser";
export default {
  data() {
    return {
      id: 1,
      cardList: [],
      arr1: [],
      arr2: [],
    };
  },
  onLoad() {
    this.init();
  },
  methods: {
    async init() {
      this.arr1 = [];
      this.arr2 = [];
      try {
        const { Data } = await reqPost("MemberTimeList");
        let number = 0;
        console.log("yuejka", res);
        Data.forEach((item) => {
          if (item.StatusDesc == "已过期") {
            this.arr2.push(item);
          } else {
            this.arr1.push(item);
            number += item.LiveTime;
          }
        });
        this.cardList = this.arr1;
        useUser().cardNumber = number;
      } catch (err) {
        console.log("error", err);
      }
    },
    onSwitch(e) {
      this.id = e.target.id;
      this.cardList = [];
      if (this.id == 1) {
        this.cardList = this.arr1;
      } else {
        this.cardList = this.arr2;
      }
    },
    navTo(id) {
      uni.navigateTo({
        // url: `/pages/coupon/details?type=1&id=${id}`,
        url: `/pages/coupon/timeCardDetails?type=1&id=${id}`,
      });
    },
  },
};
</script>

<style lang="scss">
page {
  background: #f8f8f8;
}

.head {
  width: 100%;
  height: 88rpx;
  line-height: 88rpx;
  background-color: #fff;
  display: flex;
  flex-wrap: nowrap;
  justify-content: space-around;
  align-items: center;
  position: fixed;
  top: 0rpx;
  z-index: 100;
  box-shadow: 0rpx 12rpx 12rpx rgba(21, 51, 77, 0.05);
}
.active {
  border-bottom: 4rpx solid #f4caa6;
}
.card_content {
  padding-top: 80rpx;
  margin: 40rpx 20rpx;
  .card {
    width: 100%;
    height: 220rpx;
    margin-bottom: 20rpx;
    background-color: #fff;
    border-radius: 8rpx;
    box-shadow: 0px 6px 12px rgba(32, 32, 32, 0.05);
    image {
      width: 220rpx;
      height: 220rpx;
      float: left;
      margin-right: 20rpx;
      // border-right: 2rpx solid #000;
    }
    .right {
      width: 470rpx;
      float: left;
      .title {
        width: 100%;
        line-height: 42rpx;
        font-size: 32rpx;
        font-weight: bold;
        color: #000;
        margin: 10rpx 0;
      }
      text {
        width: 100%;
        line-height: 32rpx;
        font-size: 24rpx;
        color: #a2a2a2;
        display: inline-block;
      }
      .card_number {
        width: 100%;
        height: 60rpx;
        text {
          font-size: 28rpx;
          color: #4cd964;
          line-height: 60rpx;
          float: left;
          width: auto;
        }
        button {
          padding: 0;
          margin: 0;
          width: 130rpx;
          height: 60rpx;
          color: #fff;
          background-color: #4cd964;
          float: right;
          line-height: 60rpx;
        }
      }
    }
  }
}
</style>
